import { formUI } from '@/comon/tools';
import { formItem, label, required, rules, useForm } from '@/hooks/useForm';
import { PageInfo, usePageInfoStore } from '@/store/pageInfo';
import { Input } from 'antd';
import { FC, useEffect } from 'react';

class Config {
  @label('标题')
  @formItem(<Input />)
  @rules(required('请填写标题'))
  title?: string;

  @label('问卷描述')
  @formItem(<Input />)
  desc?: string;

  @label('js')
  @formItem(<Input.TextArea />)
  js?: string;

  @label('css')
  @formItem(<Input.TextArea />)
  css?: string;
}

const PageSetting: FC = (props) => {
  const { pageInfo, reset } = usePageInfoStore();

  const form = useForm({
    config: Config,
    initialValue: pageInfo,
    onChange,
  });

  useEffect(() => {
    form.setFormData(pageInfo);
  }, [pageInfo]);

  function onChange(form: PageInfo) {
    reset(form);
  }

  return formUI(form);
};

export default PageSetting;
